<template>
  <div class="box">
    <div class="shell">
      <!-- 登录表单 -->
      <div class="container">
        <el-form class="form" ref="loginForm" :model="loginForm" auto-complete="on" label-position="left">
          <h2 class="title">登入账号</h2>
          <input type="text" class="form_input" v-model.trim="loginForm.username" placeholder="请输入学号或工号">

          <input type="password" class="form_input" v-model.trim="loginForm.password" placeholder="请输入密码">

          <el-button :loading="loading" type="primary" class="form_button button submit"
                     @click="handleLogin()">登录</el-button>
          <el-link type="primary" style="position: absolute;right: 10px;top: 20px;" @click="toRegister">
            注册账号<i class="el-icon-view el-icon-arrow-right"></i>
          </el-link>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name:"Login",
  data(){
    return{
      loginForm:{
        username:undefined,
        password:undefined
      },
      loading:false,
    }
  },
  methods:{
    handleLogin(){
      if( this.loginForm.username && this.loginForm.password ){
        this.loading = true

        this.$store
          .dispatch("user/login", this.loginForm )
          .then(() => {
            this.$router.push("/");
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      }
      else {
        this.$message.error("请输入用户名和密码！")

      }
    },
    toRegister(){
      this.$router.push( '/register' )
    }
  },
  created() {

    const params = this.$route.query

    if( params['username'] ){
      this.loginForm = {
        username: atob( params['username'] ),
        password: atob( params['password'])
      }
    }
  }
}

</script>
<style scoped>
* {
  /* 字体无法选中 */
  user-select: none;

  /* border: 1px solid #ccc;  */
}

.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  background-color: #ecf0f3;
  color: #a0a5a8;
}

.shell {
  position: relative;
  width: 80%;
  height: 50%;
  padding: 25px;
  background-color: #ecf0f3;
  box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 25px;
  background-color: #ecf0f3;
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.form_input {
  height: 60px;
  margin: 10px;
  padding-left: 25px;
  font-size: 18px;
  letter-spacing: 0.15px;
  border: none;
  outline: none;
  background-color: #ecf0f3;
  transition: 0.25s ease;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
  width: 100%;
}

.form_input:focus {
  box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
}

.title {
  font-size: 34px;
  font-weight: 700;
  color: #181818;
  letter-spacing: 10px;
}

.button {
  width: 180px;
  height: 50px;
  border-radius: 25px;
  margin-top: 10px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.15px;
  background-color: #4B70E2;
  color: #f9f9f9;
  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
  border: none;
  outline: none;
}

.submit:hover {
  box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
  transform: scale(0.985);
  transition: 0.25s;
}
</style>
